// 左侧导航
import React from "react";
import { message } from "antd";
import "./adminleft.less";
import img1 from "../../assets/img/ico.png";

import { Menu, Switch, Icon } from "antd";
import {
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
} from "@ant-design/icons";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Link, withRouter } from "react-router-dom";

import menulist from "../../config/menuConfig";

const { SubMenu } = Menu;

// 后台管理的home页
class AdminLeft extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: "dark",
      current: "1",
    };
  }

  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };

  handleClick = (e) => {
    console.log("click ", e);
    this.setState({
      current: e.key,
    });
  };

  menulistshow = (menulist) => {
    const path = this.props.location.pathname;
    return menulist.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key}>
            <Link to={item.key}>
              <Icon type={item.icon} /> <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      } else {
        if (item.children.find((cItem) => path.indexOf(cItem.key) === 0)) {
          this.openKey = item.key;
        }
        return (
          <SubMenu
            key={item.key}
            title={
              <span>
                <Icon type={item.icon} /> <span>{item.title}</span>
              </span>
            }
          >
            {this.menulistshow(item.children)}
          </SubMenu>
        );
      }
    });
  };

  render() {
    // 得到当前请求路径, 作为选中菜单项的 key 
    const selectKey = this.props.location.pathname 
    const openKey = this.openKey
    return (
      <div className="admin-left">
        <div className="nav-header">
          <img src={img1} alt="" />
          <h2>后台管理</h2>
        </div>
        <div className="nav-content">
        
          <Menu
            mode="inline"
            theme="dark"
            selectedKeys={[selectKey]}
            defaultOpenKeys={[openKey]}
          >
            {this.menulistshow(menulist)}
          </Menu>
        </div>
      </div>
    );
  }
}

export default withRouter(AdminLeft);
